<template>
  <div class="admin-login">
    <!-- Toast 组件 -->
    <Toast 
      :message="toast.message" 
      :type="toast.type" 
      :visible="toast.visible"
      @close="hideToast"
    />
    
    <div class="login-container">
      <div class="login-card">
        <div class="login-header">
          <h1>管理员登录</h1>
          <p>乐享作坊后台管理系统</p>
        </div>
        
        <form @submit.prevent="handleLogin" class="login-form">
          <div class="form-group">
            <label for="username">用户名</label>
            <input
              id="username"
              v-model="form.username"
              type="text"
              placeholder="请输入管理员用户名"
              required
              :disabled="loading"
            />
          </div>
          
          <div class="form-group">
            <label for="password">密码</label>
            <div class="password-input">
              <input
                id="password"
                v-model="form.password"
                :type="showPassword ? 'text' : 'password'"
                placeholder="请输入密码"
                required
                :disabled="loading"
              />
              <button
                type="button"
                @click="showPassword = !showPassword"
                class="password-toggle"
                :disabled="loading"
              >
                <svg v-if="showPassword" width="20" height="20" viewBox="0 0 24 24">
                  <path fill="currentColor" d="M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z"/>
                </svg>
                <svg v-else width="20" height="20" viewBox="0 0 24 24">
                  <path fill="currentColor" d="M11.83,9L15,12.16C15,12.11 15,12.05 15,12A3,3 0 0,0 12,9C11.94,9 11.89,9 11.83,9M7.53,9.8L9.08,11.35C9.03,11.56 9,11.77 9,12A3,3 0 0,0 12,15C12.22,15 12.44,14.97 12.65,14.92L14.2,16.47C13.53,16.8 12.79,17 12,17A5,5 0 0,1 7,12C7,11.21 7.2,10.47 7.53,9.8M2,4.27L4.28,6.55L4.73,7C3.08,8.3 1.78,10 1,12C2.73,16.39 7,19.5 12,19.5C13.55,19.5 15.03,19.2 16.38,18.66L16.81,19.09L19.73,22L21,20.73L3.27,3M12,7A5,5 0 0,1 17,12C17,12.64 16.87,13.26 16.64,13.82L19.57,16.75C21.07,15.5 22.27,13.86 23,12C21.27,7.61 17,4.5 12,4.5C10.6,4.5 9.26,4.75 8,5.2L10.17,7.35C10.76,7.13 11.37,7 12,7Z"/>
                </svg>
              </button>
            </div>
          </div>
          
          <button 
            type="submit" 
            class="login-btn"
            :disabled="loading"
          >
            <span v-if="loading" class="loading-spinner"></span>
            {{ loading ? '登录中...' : '登录' }}
          </button>
        </form>
        
        <div class="login-footer">
          <p>如需帮助，请联系系统管理员</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Toast from '@/components/Toast.vue'
import { adminAuth } from '@/utils/adminApi'

export default {
  name: 'AdminLoginView',
  components: {
    Toast
  },
  data() {
    return {
      form: {
        username: '',
        password: ''
      },
      showPassword: false,
      loading: false,
      toast: {
        visible: false,
        message: '',
        type: 'info'
      }
    }
  },
  mounted() {
    // 如果管理员已经登录，直接跳转到后台
    const adminToken = localStorage.getItem('adminToken')
    const adminExpiry = localStorage.getItem('adminTokenExpiry')
    
    if (adminToken && adminExpiry && Date.now() < parseInt(adminExpiry)) {
      this.$router.push('/admin/dashboard')
    }
  },
  methods: {
    async handleLogin() {
      if (!this.form.username || !this.form.password) {
        this.showToast('请填写完整的登录信息', 'warning')
        return
      }

      this.loading = true
      
      try {
        const response = await adminAuth.login({
          username: this.form.username,
          password: this.form.password
        })

        if (response.success) {
          // 保存管理员token和信息 - 使用独立的key，不影响前台用户登录
          localStorage.setItem('adminToken', response.token)
          localStorage.setItem('adminInfo', JSON.stringify(response.user))
          
          // 计算token过期时间（管理员8小时）
          const expiryTime = Date.now() + (8 * 60 * 60 * 1000)
          localStorage.setItem('adminTokenExpiry', expiryTime.toString())
          
          this.showToast('登录成功！正在跳转...', 'success')
          
          // 延迟跳转，让用户看到成功提示
          setTimeout(() => {
            this.$router.push('/admin/dashboard')
          }, 1500)
        } else {
          this.showToast(response.message || '登录失败', 'error')
        }
      } catch (error) {
        console.error('管理员登录错误:', error)
        if (error.response?.status === 401) {
          this.showToast('用户名或密码错误', 'error')
        } else if (error.response?.status >= 500) {
          this.showToast('服务器错误，请稍后重试', 'error')
        } else {
          this.showToast(error.response?.data?.message || '网络连接失败，请检查网络设置', 'error')
        }
      } finally {
        this.loading = false
      }
    },
    
    showToast(message, type = 'info') {
      this.toast = {
        visible: true,
        message,
        type
      }
    },
    
    hideToast() {
      this.toast.visible = false
    }
  }
}
</script>

<style scoped>
.admin-login {
  min-height: 100vh;
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.login-container {
  width: 100%;
  max-width: 400px;
}

.login-card {
  background: #121212;
  border-radius: 16px;
  padding: 40px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  border: 1px solid #333;
}

.login-header {
  text-align: center;
  margin-bottom: 32px;
}

.login-header h1 {
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 8px 0;
}

.login-header p {
  color: #b3b3b3;
  font-size: 14px;
  margin: 0;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}

.form-group input {
  background: #2a2a2a;
  border: 1px solid #404040;
  border-radius: 8px;
  padding: 14px 16px;
  color: #fff;
  font-size: 14px;
  transition: all 0.2s ease;
}

.form-group input:focus {
  outline: none;
  border-color: #1db954;
  box-shadow: 0 0 0 2px rgba(29, 185, 84, 0.2);
}

.form-group input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.password-input {
  position: relative;
}

.password-toggle {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #b3b3b3;
  cursor: pointer;
  padding: 4px;
  transition: color 0.2s ease;
}

.password-toggle:hover:not(:disabled) {
  color: #1db954;
}

.password-toggle:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.login-btn {
  background: #1db954;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 16px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
}

.login-btn:hover:not(:disabled) {
  background: #1aa854;
  transform: translateY(-1px);
}

.login-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.loading-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top: 2px solid #fff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.login-footer {
  text-align: center;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid #333;
}

.login-footer p {
  color: #808080;
  font-size: 12px;
  margin: 0;
}

@media (max-width: 480px) {
  .login-card {
    padding: 32px 24px;
  }
  
  .login-header h1 {
    font-size: 24px;
  }
}
</style> 